<template>
    <view v-if="tpa">
        <view>
            <navbar title="考试解析"></navbar>
        </view>
        <view class="box">
            <view style="display: flex;">
                <view style="margin-left: auto;">
                    <u-tag :text="gTN(curQuestion.type)" curQuestion.type="primary"></u-tag>
                    <u-tag :text="'分值：'+curQuestion.point" curQuestion.type="success"></u-tag>
                </view>
            </view>
            <template v-if="curQuestion.type===1">
                <view class="question">
                    <view class="title">
                        {{curQuestion.no+"."+curQuestion.questionContent}}
                    </view>
                    <view :class="'option-color '+getStatusClass(option.id)" v-for="option in curQuestion.options">
                        {{
                      option.content
                    }}
                    </view>
                </view>
            </template>
            <template v-if="curQuestion.type===2">
                <view class="question">
                    <view class="title">
                        {{curQuestion.no+"."+curQuestion.questionContent}}
                    </view>
                    <view :class="'option-color '+getStatusClass(option.id)" v-for="option in curQuestion.options">
                        {{
                        option.content
                    }}
                    </view>
                </view>
            </template>
            <template v-if="curQuestion.type===3">
                <view class="question">
                    <view class="title">
                        {{curQuestion.no+"."+curQuestion.questionContent}}
                    </view>
                    <view :class="'option-color '+getStatusClass(option.id)" v-for="option in [1,0]">
                        {{
                      option===1?"正确":"错误"
                    }}
                    </view>
                </view>
            </template>
            <template v-if="curQuestion.type===4">
                <view class="question">
                    <view class="title">
                        {{curQuestion.no+"."+getQuestion(curQuestion.questionContent)}}
                    </view>
                    <view class="input" v-for="(o,i) in curQuestion.options">
                        <text class="user-answer">
                            {{curQuestion.userAnswer[i]}}
                        </text>
                    </view>
                </view>
            </template>
            <template v-if="curQuestion.type===5">
                <view class="question">
                    <view class="title">
                        {{curQuestion.no+"."+curQuestion.questionContent}}
                    </view>
                    <view>
                        <text class="user-answer">
                            {{curQuestion.userAnswer[0]}}
                        </text>
                    </view>
                </view>
            </template>
        </view>
        <view>
            正确答案:{{
                JSON.stringify(
               curQuestion.type===4? curQuestion.options.map(d=>d.content): curQuestion.options.filter(d=>d.isRight===1).map(d=>d.content)
            )
            }}
        </view>
        <view class="operation">
            <template v-if="curIndex>0">
                <u-button @click="curIndex--" class="operation-btn">上一题</u-button>
            </template>
            <template v-if="curIndex<tpa.testPaper.testPaperDetails.length-1">
                <u-button @click="curIndex++" class="operation-btn">下一题</u-button>
            </template>
        </view>
    </view>
</template>

<script>
    import {
        request
    } from '../../api'
    import {
        getTypeName
    } from '../../api/name';
    export default {
        data() {
            return {
                // testPaperAnswer
                tpa: null,
                curIndex: 0,
            }
        },
        methods: {
            getQuestion(question) {
                const questions = question.split("{0}");
                const res = new Array(questions.length * 2 - 1);
                for (let i = 0; i < questions.length - 1; i++) {
                    res[2 * i] = questions[i];
                    if (i + 1 <= this.options.length) {
                        res[2 * i + 1] = "_____";
                    }
                }
                return res.join("");
            },
            gTN(type) {
                return getTypeName(type);
            },
            getStatusClass(oid) {
                if (this.curQuestion.userAnswer.includes(oid)) {
                    if (this.curQuestion.options.filter(d => d.isRight === 1).map(d => d.id).includes(oid)) {
                        return "active";
                    } else {
                        return "error";
                    }
                } else {
                    return ""
                }
            }
        },
        async mounted() {
            const res = await request.get("/exam/explain", {
                id: this.$route.query.id
            });
            if (res.code >= 0) {
                this.tpa = res.data;
                console.log(this.tpa);
            }
        },
        computed: {
            curQuestion() {
                console.log(this.tpa.testPaper.testPaperDetails[this.curIndex]);
                if (this.tpa) {
                    return this.tpa.testPaper.testPaperDetails[this.curIndex];
                }
                return null;
            }
        }
    }
</script>
<style>
    .box {
        height: 100%;
    }

    .question {
        font-size: 0.8rem;
        margin: 1rem;
    }

    .input {
        margin: 0.5rem 0;
        font-size: 1rem;
    }

    .option {
        padding: 1rem;
        margin: 0.5rem 0;
        font-size: 1rem;
    }

    .option-color {
        padding: 1rem;
        margin: 0.5rem 0;
        font-size: 1rem;
        background-color: antiquewhite;
    }

    .active {
        background-color: springgreen;
    }

    .error {
        background-color: red;
    }

    .operation {
        margin: 1rem;
    }

    .operation-btn {
        margin: 0.5rem 0;
    }

    .user-answer {
        background-color: antiquewhite;
        display: block;
        padding: 0.8rem 0.4rem;

    }
</style>